<!--
 * @Author: your name
 * @Date: 2022-04-28 14:24:42
 * @LastEditTime: 2022-05-07 14:53:05
 * @LastEditors: jjjjwei 1506865174@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \二阶段项目\gitcode\html\ui.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <link rel="stylesheet" href="../layui/font/iconfont.woff">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #show {
      width: 95%;
      padding: 0 2.5% 2.5% 2.5%;
      background-color: rgb(240, 244, 246);
    }

    #tubiaofont {
      height: 60px;
      background-color: rgb(240, 244, 246);
    }

    #tubiaofont span {
      display: inline-block;
      height: 60px;
      line-height: 60px;
      color: gray;
    }
    #tubiaofont span:first-child{
      color: blue; 
      font-size: 18px;
    }
   
    #tabdiv {
      width: 100%;
      background-color: white;
      overflow: hidden;
    }

    #tabdiv>p {
      width: 100%;
      padding: 20px 0;
      background-color: rgb(236, 239, 241);
    }
   
    #searchname{
            height: 34px;
            margin-left: 60%;
            margin-right: 1%;
            padding-left: 10px;
        }
    #search,#reset{
          font-size: 12px;
        }
    #tabdiv>table {
      width: 100%;
      text-align: center;
    }

    #addbtn {
      margin: 1%;
    }

    tr {
      border: 1px solid gainsboro;
      height: 50px;
    }

    #piLiangAndFenYe{
            margin: 10px 0;
            height: 50px;
            padding-left: 1%;
            position: relative;
        }
        #test1{
            padding: 5px 10px;
            margin-top: 2px;
            float: right;
        }
        #DIB{
            width: 100px;
            height: 30px;
            border: 1px solid gray;
            background-color: rgba(1, 1, 1, 0);
            padding: 5px 0;
            margin-top: 10px;
            border-radius: 2px;
            float: left;
        }
        #fenYe{
            width: 400px;
            height: 30px;
            border-style: none;
            position: absolute;
            right: 10px;
        }
        #fenYe>div{
            float: right;
        }
        #fenYe .fenyepag{
            width: 90px;
            height: 30px;
            line-height: 26px;
            margin: 7px 5px;
            border-style: none;
        }
        #test1 button{
            width: 40px;
            height: 30px;
            line-height: 26px;
            margin: 0 5px;
            border-style: none;
        }

    #tanchukuang {
      width: 95%;
      padding: 0 2.5% 2.5% 2.5%;
      background-color: rgb(240, 244, 246);
    }

    #popup_box {
      width: 100%;
      background-color: white;
      padding-bottom: 20px;
      overflow: hidden;
    }

    #popup_box>p {
      width: 100%;
      padding: 20px 0;
      margin-bottom: 1.5%;
      background-color: rgb(236, 239, 241);
    }

    #popup_box>p>span {
      display: inline-block;
      width: 100px;
      border: 1px solid gray;
      background-color: white;
      padding: 5px 0;
      text-align: center;
      margin-left: 70%;
      border-radius: 2px;
    }
      /* 修改区域 */
    #popup_box>div{
      width: 90%;
      margin: 0 auto;
      border-bottom: 1px dashed black;
      margin-bottom: 2%;
    }
    #popup_box>div>h3{
      color: #1ab394;
      font-weight: 800;
    }
    #popup_box>div>div{
      width: 100%;
      margin: 2% 0;
      padding-left: 10%;
      box-sizing: border-box;
    }
    #popup_box>div>div>span {
      display: inline-block;
      width: 10%;
      text-align: right;
      margin-right: 2%;
    }
    #popup_box>div input ,#popup_box>div select{
      display: inline-block;
      width: 20%;
      height: 38px;
      box-sizing: border-box;
      border: 1px solid black;
      padding-left: 10px;
    }
    #popup_box>div>div>span:nth-of-type(2){
      margin-left: 20%;
    }
    #tijiao {
      margin-left: 43%;
      width: 6%;
      height: 38px;
    }

    #chongzhi {
      border: 1px solid black;
      box-sizing: border-box;
      width: 6%;
      height: 38px;
      background-color: white;
      color: black
    }

   
  </style>
</head>

<body>
  <!-- 界面 -->
  <div id="show">
    <div id="tubiaofont">
      <span class="layui-icon layui-icon-home"></span>
      <span>&gt;&gt;</span>
      <span>用户名</span>
      <span>&gt;&gt;</span>
      <span>用户名</span>
      <span>&gt;&gt;</span>
      <span>用户名</span>
    </div>
    <div id="tabdiv">
      <p>用户列表:(填自己的页面的具体内容)</p>
      <table>
        <!-- 表格的总宽度以定，高度以定，根据自己的表格的具体内容进行排版 -->
        <button id="addbtn" class="layui-btn">添加用户</button><!-- 按钮的样式 -->
        <input type="text" placeholder="输入查询的用户名" id="searchname">
        <button class="layui-btn" id="search">查询</button>
        <button class="layui-btn" id="reset">重置</button>
        <thead>
          <tr>
            <th><input type="checkbox"></th>
            <th>ID</th>
            <th>用户名</th>
            <th>用户等级</th>
            <th>积分</th>
            <th>邮箱</th>
            <th>是否禁用</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox"></td>
            <td>1</td>
            <td>gsigs</td>
            <td>普通会员</td>
            <td>10</td>
            <td>2262333412@qq.com</td>
            <td>否</td>
            <td>
              <!-- 修改图标 -->
              <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
              <!-- 删除图标 -->
              <button id="cc" type="button" class="layui-btn layui-btn-normal layui-btn-sm"
                style="background-color: red;"><i class="layui-icon"></i></button>
            </td>
          </tr>
        </tbody>
      </table>
      <div id="piLiangAndFenYe" class="clear">
        <button id="DIB">批量删除</button>
        <div id="fenYe" class="clear">
            <div>
                <button id="pagUp" class="fenyepag">上一页</button>
            </div>
            <div id="test1"></div><!-- 生成分页 -->
            <div>
                <button id="pagDow" class="fenyepag">上一页</button>
            </div>
        </div>
    </div>
    </div>
  </div>
  <!-- 点击修改或增加的弹出框 -->
  <div id="tanchukuang">

    <div id="tubiaofont">
      <span class="layui-icon layui-icon-home"></span>
      <span>&gt;&gt;</span>
      <span>用户名</span>
      <span>&gt;&gt;</span>
      <span>用户名</span>
      <span>&gt;&gt;</span>
      <span>用户名</span>
    </div>
    <div id="popup_box">
      <p>修改商品(填自己的页面的具体内容) <span>返回列表</span> </p>

      <!-- 输入框，我只做两个作为横向的排版，后面的根据自己的内容在后面添加 -->
      <div>
        <h3>页面小标题</h3>
        <div>
          <span>用户名</span><input type="text" name="" id="">
          <span>邮箱</span><input type="text" name="" id="">
        </div>
        <div>
          <span>邮箱</span><input type="text" name="" id="">
          <span>确认密码</span><input type="text" name="" id="">
        </div>
        <div>
          <span>用户等级</span><select name="" id="level">
              <option value="">普通会员</option>
              <option value="">高级会员</option>
              <option value="">金牌会员</option>
          </select>
          <span>用户等级</span><select name="" id="level">
              <option value="">普通会员</option>
              <option value="">高级会员</option>
              <option value="">金牌会员</option>
          </select>
        </div>
        
      </div>
      <div>
        <h3>页面小标题</h3>
        <div>
          <span>用户名</span><input type="text" name="" id="">
          <span>邮箱</span><input type="text" name="" id="">
        </div>
        <div>
          <span>邮箱</span><input type="text" name="" id="">
          <span>确认密码</span><input type="text" name="" id="">
        </div>
        <div>
          <span>用户等级</span><select name="" id="level">
              <option value="">普通会员</option>
              <option value="">高级会员</option>
              <option value="">金牌会员</option>
          </select>
          <span>用户等级</span><select name="" id="level">
              <option value="">普通会员</option>
              <option value="">高级会员</option>
              <option value="">金牌会员</option>
          </select>
        </div>
      </div>
      <button id="tijiao" class="layui-btn layui-btn-sm">提交</button>
      <button id="chongzhi" class="layui-btn layui-btn-sm">重置</button>
    </div>
  </div>

  <!-- 以下是其他用得上的标，按需所取 -->

  <!-- 小一点的按钮的样式 -->
  <button class="layui-btn layui-btn-sm">查询</button>
  <!-- +号的图标 -->
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe654;</i></button>
  <!-- 刷新图标 -->
  <span class="layui-icon layui-icon-refresh-1"></span>



  <script src="../js/jQuery.3.6.0-uncompress.js"></script>
  <script src="../layui/layui.js"></script>
  <script>

    //点击删除的弹出框的点击事件
    $('#cc').click(function () {   // 给删除按钮绑定事件即可  用事件委派，这儿是只给一个删除绑定了
      layer.confirm('确认删除？', {
        btn: ['确认', '取消'] //按钮
      }, function () {
        layer.msg('已删除', { icon: 1, time: 500 });
      });
    })

   

  </script>
</body>

</html>